<template>
	<view class="page">
		<view style="position: sticky;border-bottom: 1rpx solid #F1F1F1;">
			<v-tabs
				:scroll="false"
				@change="changeTab"
				v-model="current"
				:tabs="tabs"
				activeColor="#000000"
				:lineScale="0.2"
				padding="0rpx"
				height="80rpx"
				line-height="6rpx"
				lineColor="#32C59A"
				currentColor="#00000"
			></v-tabs>
		</view>
		<!-- 列表 -->
		<swiper easing-function="linear" :current="current" :style="{ height: 'calc(100vh - 80rpx)' }" @change="swiperChange">
			<swiper-item v-for="(mItem, mIndex) in tabs" :key="mIndex">
				<scroll-view scroll-y style="height: 100%;" @scrolltolower="loadMore">
					<!-- 医生 -->
					<view class="list" v-if="mIndex == 0"><doctor-item v-for="(item, index) in doctorList" :key="index" :item="item"></doctor-item></view>
					<!-- 帖子 -->
					<div v-if="mIndex == 1" class="post" v-for="(item, index) in postList" :key="index" @click="to('/pages/CommunityPages/details/main?id=' + item.id)">
						<div class="top">
							<div><image class="avatar" :src="item.avatar || '/static/images/default_avatar.png'" mode="aspectFill"></image></div>
							<div class="name-box">
								<p class="name">{{ item.nickName || '' }}</p>
								<p class="time">{{ item.createTime }}</p>
							</div>
							<div class="solution" v-if="item.helpStatus == 1">已解决</div>
						</div>
						<div v-if="item.recourseAmount > 0" class="reward">悬赏{{ item.recourseAmount }}积分</div>
						<div class="content-box">
							<text class="good" v-if="item.publishStatus == 2">精</text>
							<text class="stick" v-if="item.publishStatus == 1">顶</text>
							<text class="ask" v-if="item.publishType == 1">问</text>
							<text v-if="item.publishSubject" class="title">【{{ item.publishSubject }}】</text>
							<text class="content">{{ item.publishContent || '' }}</text>
						</div>
						<div v-if="item.showImage" class="img-box" @click.stop>
							<img class="img" v-for="(x, y) in item.imgs" :key="y" :src="x" @click="preview(x, item.imgs)" />
						</div>
						<view class="btn-primary" v-if="item.imgs.length > 0" @click.stop="changeImageStatus(index)">{{ item.showImage ? '隐藏图片' : '查看图片' }}</view>
						<view class="btn-primary" v-if="item.videoUrl" @click.stop="playVideo(item)">播放视频</view>
						<div class="bottom">
							<div class="disease" @click.stop="to('/pages/CommunityPages/circleDetails/main?id=' + item.groupId)">{{ item.groupName }}</div>
							<div class="right-box">
								<div class="operation">
									<image class="icon" src="/static/images/ic_comment.png"></image>
									<p class="count">{{ item.commentsAmount }}</p>
								</div>
								<div class="operation">
									<image class="icon" src="/static/images/ic_like.png"></image>
									<p class="count">{{ item.collectQuantity || 0 }}</p>
								</div>
							</div>
						</div>
					</div>
					<!-- 文章 -->
					<view
						v-if="mIndex == 2"
						class="article"
						v-for="(item, index) in articleList"
						:key="index"
						@click="to(`/pages/other/webView/main?path=${encodeURIComponent(`https://h5.wmel.cn/detail?isShare=0&id=${item.organDiseaseId}`)}`)"
					>
						<view class="title">{{ item.recoveryTitle }}</view>
						<view class="content">{{ item.organDiseaseName }}</view>
					</view>
					<!-- 疾病 -->
					<view
						v-if="mIndex == 3"
						class="disease"
						v-for="(item, index) in diseaseList"
						:key="index"
						@click="to(`/pages/other/result/main?id=${item.id}&type=${item.isChild == 1 ? 2 : 1}&status=false`)"
					>
						<view class="title">{{ item.name }}</view>
						<view class="content">{{ item.recordTime }}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { browserDoctorList, browserPostList, browserArticleList, browserDiseaseList } from '@/apis/request.js';
import DoctorItem from '@/components/doctor-item/doctor-item.vue';

export default {
	data() {
		return {
			current: 0,
			tabs: ['医生', '帖子', '文章', '疾病'],
			page: [1, 1, 1, 1],
			total: [0, 0, 0, 0],
			doctorList: [],
			postList: [],
			articleList: [],
			diseaseList: []
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.page = [1, 1, 1, 1];
			this.total = [0, 0, 0, 0];
			this.doctorList = [];
			this.postList = [];
			this.articleList = [];
			this.diseaseList = [];
			this.getList();
		},
		to(url) {
			uni.navigateTo({
				url
			});
		},
		changeImageStatus(index) {
			this.postList[index].showImage = !this.postList[index].showImage;
		},
		preview(current, imgList) {
			this.$Imgpreview(current, imgList);
		},
		playVideo(item) {
			uni.navigateTo({
				url: '/pages/CommunityPages/video/video?src=' + encodeURIComponent(item.videoUrl)
			});
		},
		loadMore() {
			this.getList();
		},
		changeTab(e) {
			this.current = e;
		},
		swiperChange(e) {
			this.current = e.detail.current;
			this.checkList();
		},
		checkList() {
			if (this.current == 0 && this.doctorList.length == 0) {
				this.getDoctorList();
			} else if (this.current == 1 && this.postList.length == 0) {
				this.getPostList();
			} else if (this.current == 2 && this.articleList.length == 0) {
				this.getArticleList();
			} else if (this.current == 3 && this.diseaseList.length == 0) {
				this.getDiseaseList();
			}
		},
		getList() {
			if (this.current == 0) {
				this.getDoctorList();
			} else if (this.current == 1) {
				this.getPostList();
			} else if (this.current == 2) {
				this.getArticleList();
			} else if (this.current == 3) {
				this.getDiseaseList();
			}
		},
		getDoctorList() {
			browserDoctorList({
				pageNo: this.page[0],
				pageSize: 10
			}).then(res => {
				uni.stopPullDownRefresh();
				const list = res.records;
				this.total[0] = res.total;
				if (this.page[0] == 1) {
					this.doctorList = list;
				} else {
					this.doctorList = this.doctorList.concat(list);
				}
				if (this.doctorList.length < this.total[0]) {
					this.page[0]++;
				}
			});
		},
		getPostList() {
			browserPostList({
				pageNo: this.page[1],
				pageSize: 10
			}).then(res => {
				uni.stopPullDownRefresh();
				const list = res.records.map(item => {
					return Object.assign(
						{
							showImage: false,
							imgs: item.imageUrl ? item.imageUrl.split(',') : []
						},
						item
					);
				});
				this.total[1] = res.total;
				if (this.page[1] == 1) {
					this.postList = list;
				} else {
					this.postList = this.postList.concat(list);
				}
				if (this.postList.length < this.total[1]) {
					this.page[1]++;
				}
			});
		},
		getArticleList() {
			browserArticleList({
				pageNo: this.page[2],
				pageSize: 10
			}).then(res => {
				uni.stopPullDownRefresh();
				const list = res.records;
				this.total[2] = res.total;
				if (this.page[2] == 1) {
					this.articleList = list;
				} else {
					this.articleList = this.articleList.concat(list);
				}
				if (this.articleList.length < this.total[2]) {
					this.page[2]++;
				}
			});
		},
		getDiseaseList() {
			browserDiseaseList({
				pageNo: this.page[3],
				pageSize: 10
			}).then(res => {
				uni.stopPullDownRefresh();
				const list = res.records;
				this.total[3] = res.total;
				if (this.page[3] == 1) {
					this.diseaseList = list;
				} else {
					this.diseaseList = this.diseaseList.concat(list);
				}
				if (this.diseaseList.length < this.total[3]) {
					this.page[3]++;
				}
			});
		}
	},
	onPullDownRefresh() {
		this.getList()
	}
};
</script>

<style lang="less" scoped>
.page {
	position: relative;

	.post {
		margin: 0 30rpx;
		background-color: #fff;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-top: 1px solid #f8f8f8;

		.top {
			position: relative;
			display: flex;
			align-items: center;
			align-content: center;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}

			.name-box {
				margin-left: 15rpx;
				display: flex;
				align-items: center;
				align-content: center;
				flex-direction: column;

				.name {
					width: 100%;
					font-size: 28rpx;
					text-align: left;
				}

				.time {
					margin-top: 5rpx;
					color: #aaa;
					font-size: 24rpx;
				}
			}

			.solution {
				position: absolute;
				right: 0;
				color: #ff290b;
				font-size: 26rpx;
				font-weight: bold;
				transform: rotate(45deg);
			}
		}

		.reward {
			margin: 5rpx 0;
			font-size: 28rpx;
			color: #e5ae54;
		}

		.content-box {
			.ask {
				margin-right: 5rpx;
				padding: 0 5rpx;
				color: #f83f06;
				font-size: 24rpx;
				border: 1rpx solid #f83f06;
				background-color: #fff3f4;
				border-radius: 5rpx;
			}

			.stick {
				margin-right: 5rpx;
				padding: 0 5rpx;
				color: #1dda61;
				font-size: 24rpx;
				border: 1rpx solid #1dda61;
				background-color: #e6f9ed;
				border-radius: 5rpx;
			}

			.good {
				margin-right: 5rpx;
				padding: 0 5rpx;
				color: #07a0f8;
				font-size: 24rpx;
				border: 1rpx solid #07a0f8;
				background-color: #e7f4fb;
				border-radius: 5rpx;
			}

			.title {
				color: #333333;
				font-size: 30rpx;
			}

			.content {
				color: #333333;
				font-size: 32rpx;
			}
		}

		.img-box {
			display: flex;
			flex-wrap: wrap;

			.img {
				margin: 10rpx 10rpx 0 0;
				width: 222rpx;
				height: 222rpx;
				border-radius: 10rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-between;

			.disease {
				padding: 10rpx 25rpx;
				color: #f48712;
				font-size: 26rpx;
				border-radius: 30rpx;
				background-color: #fef5ee;
			}

			.right-box {
				display: flex;
				align-items: center;
				align-content: center;

				.operation {
					display: flex;
					align-items: center;
					align-content: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}

					.count {
						margin-left: 8rpx;
						font-size: 24rpx;
					}

					&:last-child {
						margin-left: 30rpx;
					}
				}
			}
		}

		.btn-primary {
			height: 60rpx;
			width: 200rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			line-height: 60rpx;
			text-align: center;
			background: #32C59A;
			color: #ffffff;
			font-size: 28rpx;
			border-radius: 100rpx;
		}
	}

	.article {
		padding: 5upx 30upx;
		border-bottom: 1rpx solid #f2f2f2;

		.title {
			padding: 15upx 0;
			font-size: 28upx;
			color: #333333;
			border-bottom: 1rpx solid #f2f2f2;
		}

		.content {
			padding: 15upx 0;
			font-size: 24upx;
			color: #666666;
		}
	}

	.disease {
		padding: 5upx 30upx;
		border-bottom: 1rpx solid #f2f2f2;

		.title {
			padding: 15upx 0;
			font-size: 28upx;
			color: #333333;
			border-bottom: 1rpx solid #f2f2f2;
		}

		.content {
			padding: 15upx 0;
			font-size: 24upx;
			color: #666666;
		}
	}
}
</style>
